<template>
  <div v-title data-title="文章管理">
    <h1 style="text-align: center;" class="gray">
      文 章 管 理
    </h1>
    <el-divider></el-divider>

    <el-form :inline="true">

      <el-form-item>
        <!-- 左 -->
        <el-input clearable="" v-model="searchForm.title" placeholder="请输入查询文章标题">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- 中 -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getNews">查 询</el-button>
      </el-form-item>
      <!-- 右 -->
      <el-form-item>
        <el-button type="primary" @click="addnews" icon="el-icon-edit">添 加 文 章</el-button>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定要批量删除吗？" @confirm="deleteNews(null)">
          <el-button type="danger" slot="reference" :disabled="delBtnStau">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>

    </el-form>

    <el-table
        :data="newsData"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">

      <!-- 选择框 -->
      <el-table-column type="selection">
      </el-table-column>

      <!-- 文章编号id -->
      <el-table-column prop="id" label="编号">
      </el-table-column>

      <!-- 文章标题 -->
      <el-table-column prop="title" label="标题">
      </el-table-column>

      <!-- 文章内容 -->
      <el-table-column prop="content" label="内容" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editNews(scope.row.id)" icon="el-icon-edit">编辑文章</el-button>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <!-- 修改时间 -->
      <el-table-column label="修改时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{scope.row.updateTime}}</span>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column prop="control" label="操作">
        <template slot-scope="scope">
          <el-popconfirm confirm-button-text='删除' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                         title="确定要删除这条记录？" @confirm="deleteNews(scope.row.id)">
            <el-button size="small" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <br>
    <el-pagination
        style="float: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        :current-page="current"
        :total="total">
    </el-pagination>
    <br><br>


    <!-- 修改文章对话框 -->
    <el-dialog title="修改文章信息" :visible.sync="updateNews" width="90%">
      <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="updateForm.title"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="description">
          <el-input v-model="updateForm.description"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <mavon-editor v-model="updateForm.content"></mavon-editor>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="submitUpdate('updateForm')">保 存</el-button>
          <el-button @click="resetForm('updateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: 'sysnews',
  data() {
    return {
      //搜索
      searchForm: {},
	  
      //按钮禁用
      delBtnStau: true,
      //定义用于批量删除的数组
      multipleSelection: [],

      //分页
      total: 0,
      size: 10,
      current: 1,

      //
      updateNews: false,

      //回显文章数据
      updateForm: {},

      //文章数据
      newsData: [],

      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入摘要', trigger: 'blur'}
        ],
        content: [
          {trequired: true, message: '请输入内容', trigger: 'blur'}
        ]
      }
    }
  },

  //页面渲染时执行操作
  created() {
    this.getNews()
  },

  methods: {
    //Element组件定义关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    //勾选判定
    handleSelectionChange(val) {
      //console.log("勾选")
      //console.log(val)
      this.multipleSelection = val;
      //根据数组的长度判定
      this.delBtnStau = val.length == 0
    },

    //翻页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //赋值
      this.size = val
      //调用刷新
      this.getNews()
    },
	
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //赋值
      this.current = val
      //调用刷新
      this.getNews()
    },

    //加载数据,查询数据
    getNews() {
      this.$axios.get("/sys/news/list", {
        params: {
          title: this.searchForm.title,
          current: this.current,
          size: this.size
        }
      }).then(res => {
        this.newsData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },

    //编辑文章接口
    editNews(id) {
      this.$axios.get('/sys/news/info/' + id).then(res => {
        this.updateForm = res.data.data;
        this.updateNews = true;
      })
    },
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/news/update', this.updateForm).then(res => {
            //提示
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success',
            });
			//修改为成重新加载数据
			this.getNews()
            //关闭窗口
            this.updateNews = false;
            //清空
            this.updateForm = {}
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //信息重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.updateNews = false;
    },

    //增加文章跳转
    addnews() {
      this.$router.push('/sys/add/news')
    },
  
	//删除接口
	deleteNews(id) {
	  //批量删除将id存储到数组
	  var ids = []
	  //判断id是否为空
	  if (id) {
	    ids.push(id)
	  } else {
	    //遍历id
	    this.multipleSelection.forEach(row => {
	      //存储id
	      ids.push(row.id)
	    })
	  }
	  this.$axios.post("/sys/news/delete" , ids).then(res => {
	    //提示
	    this.$message({
	      showClose: true,
	      message: '文章已被删除',
	      type: 'warning'
	    });
		//刷新
		this.getNews()
	  })
	},

  },

}
</script>

<style>
</style>
